/*
说明： class:    ys(已售)  kx(空闲)  yx（已选）
功能：
1. 点击空闲座位，可以切换为已选
2. 点击已选，切换为空闲
3. 在空闲座位切换至已选时，页面右边会出现已选的座位号，x排x列
4. 在已选座位切换至空闲时，页面右边对应已选的座位消失
*/

//1 2 设置点击事件，切换class
//3  核心；获取点击位置的座位号
// 在点击时先获取第几排：再找到该座位的下标（位置）



var obj;
load();
$('body').on('click', 'dd', function () {
    //获取行
    var row = $(this).parents('dl').attr('class');
    var reg = /row/g;
    row = row.replace(reg, '').substr(1);


    //获取列
    if (row < 4) {
        var col = +$(this).index() - 1;
    } else {
        var col = +$(this).index() - 3;
    }

    //存储当前点击的数据
    obj = {};
    obj['row'] = row;
    obj['col'] = col;

    // console.log(row);
    // console.log(col);



    //判断点击 执行删除或者增加
    console.log($(this).children().attr('class'));
    if ($(this).children().attr('class') == 'kx') {
        // $(this).children().attr('class', 'yx');
        add();
        load();
    } else if ($(this).children().attr('class') == 'yx') {
        $(this).children().attr('class', 'kx');
        sub();
        load();
    }



})

$('#gopay').click(function () {
    location.href = '../html/pay.html'
})
//增加数据
function add() {
    var data = getData('seat');
    if (data.length >= 4) {
        alert('只能选4个')
    } else {
        data.push(obj);
    }
    saveData(data);
}

//删除数据
function sub() {
    var data = getData('seat');
    // console.log(data);
    data = data.filter(v => {
        console.log(v.row);
        if (v.row != obj.row || v.col != obj.col) {
            return v
        }
    });
    saveData(data);
}



//渲染页面
function load() {
    //清空样式
    $('.selected').empty();
    var data = getData('seat');
    console.log(data);
    data.forEach(e => {
        //处理样式
        if (e.row < 4) {
            var num = +e.col + 2;
            $(`.row${e.row} dd:nth-child(${num})`).children().attr('class', 'yx');

        } else {
            var num = +e.col + 4;
            $(`.row${e.row} dd:nth-child(${num})`).children().attr('class', 'yx');
        }
        //增加标签
        $('.selected').append(`<ol>${e.row}排${e.col}座</ol>`);

    });
}
//获取本地数据
function getData(name) {
    var local = localStorage.getItem(name);
    if (local != null) {
        return JSON.parse(local);
    } else {
        return [];
    }
}

//添加本地数据
function saveData(data) {
    localStorage.setItem('seat', JSON.stringify(data));

}



